<template>
    <div class="form-template-edit wechat">
        <template v-for="(item) in list">
            <template v-if="item.itemType === 0 && checkShow(item)">
                <group-item ref="GroupItem" :list.sync="item.items" :id="item.id" :key="item.id" type="wechat">
                    <template v-slot:collapseName>
                        <span class="control-item-name">{{item.name}}{{ item.unitKindName ? `(${item.unitKindName})` : "" }}</span>
                    </template>
                </group-item>
            </template>
            <template v-if="item.itemType === 1 && checkShow(item)">
                <div :key="item.id" class="form-wechat-table">
                    <span class="control-item-name">{{item.name}}</span>
                    <template v-for="(it) in item.items">
                        <fill-in-item :item.sync="it" :key="it.id">
                            <template v-slot:titleName>
                                <span class="control-item-name" :class="{'is_required': it.required}">{{it.name}}{{ it.unitKindName ? `(${it.unitKindName})` : "" }}</span>
                            </template>
                        </fill-in-item>
                    </template>
                    <el-button class="add-btn" type="primary">添加</el-button>
                </div>
            </template>
            <template v-if="item.itemType === 2 && checkShow(item)">
                <fill-in-item :item.sync="item" :key="item.id">
                    <template v-slot:titleName>
                        <span class="control-item-name" :class="{'is_required': item.required}">{{item.name}}{{ item.unitKindName ? `(${item.unitKindName})` : "" }}</span>
                    </template>
                </fill-in-item>
            </template>
        </template>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Provide, Vue } from "vue-property-decorator";
import GroupItem from "@/views/module-manage/src/components/fill-in/group-item.vue";
import FillInItem from "@/views/module-manage/src/components/fill-in/item.vue";
import FillInTable from "@/views/module-manage/src/components/fill-in/table.vue";

@Component({
    components: {
        GroupItem,
        FillInItem,
        FillInTable
    }
})
export default class PreviewForm extends Vue {
    @Prop({ default: () => { return []; } }) private list!: any[]

    @Provide("checkShow")
    checkShow(item: any) {
        if (item.itemType === 2) {
            const { cascadeId, cascadeOptionIds } = item;
            if (cascadeId) {
                return cascadeOptionIds.includes(this._allSelectValue[cascadeId]);
            }
            return true;
        } else {
            let s = 0;
            item.items.forEach((cur: any) => {
                // 判断子级不显示数量，相等时隐藏父级
                if (!this.checkShow(cur)) {
                    s++;
                }
            });
            return s !== item.items.length;
        }
    }

    get _allSelectValue() {
        return this.allSelectValue;
    }

    @Provide("addSelect")
    addSelect(val: any, itemId: any) {
        this.allSelectValue[itemId] = val;
        this.$forceUpdate();
    }

    // 所有选择选中的值
    allSelectValue: any = {}
}
</script>

<style lang="scss" scoped>
</style>
